<template>
    <div class="xzcs-pc-quizdata-detail">
        <div class="main-body flex" :class="{ 'gaussian-blur': showNoLogin }">
            <div class="left">
                <div class="nav flex">
                    <div class="daohang flex">
                        当前位置：
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item>
                                <nuxt-link to="/">首页</nuxt-link>
                            </el-breadcrumb-item>
                            <el-breadcrumb-item>
                                <nuxt-link to="/quizdata">问题库</nuxt-link>
                            </el-breadcrumb-item>
                            <el-breadcrumb-item v-if="info">
                                <nuxt-link
                                    :to="`/quizdata/type/${info.issue_cate_id}/1`"
                                    >{{ info.issue_cate_name }}</nuxt-link
                                >
                            </el-breadcrumb-item>
                            <el-breadcrumb-item class="ellipsis1 width200">{{
                                info && info.title
                            }}</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                    <div class="chaozuo flex">
                        <div  class="chaozuo-item" @click="setLike">
                            <img
                                v-if="info && is_collect == 1"
                                src="~/assets/images/collection_s.png"
                                alt=""
                            />
                            <img
                                v-if="info && is_collect == 0"
                                src="~/assets/images/collection.png"
                                alt=""
                            />
                            <span
                                v-if="info && is_collect == 1"
                                class="ysctext"
                                >已收藏</span
                            >
                            <span v-if="info && is_collect == 0"
                                >收藏</span
                            >
                        </div>
                        <div class="chaozuo-item" @click="setLike1">
                            <img
                                v-if="info && info.is_like == 0"
                                src="~/assets/images/csjh/zan_0.png"
                                alt=""
                            />
                            <img
                                v-if="info && info.is_like == 1"
                                src="~/assets/images/csjh/zan_1.png"
                                alt=""
                            />
                            <span
                                v-if="
                                    info &&
                                    info.is_like == 0 &&
                                    info.likecounts == 0
                                "
                            >
                                点赞
                            </span>
                            <span
                                v-if="
                                    info &&
                                    info.is_like == 0 &&
                                    info.likecounts != 0
                                "
                            >
                                {{ info.likecounts }}
                            </span>
                            <span
                                v-if="
                                    info &&
                                    info.is_like != 0 &&
                                    info.likecounts != 0
                                "
                                class="color1c87f3"
                            >
                                {{ info && info.likecounts }}
                            </span>
                        </div>
                        <el-popover
                            placement="bottom"
                            width="131"
                            trigger="hover"
                        >
                            <div class="xzcs-pc-quizdata-detail-share">
                                <div class="share" @click="clone">
                                    <img
                                        src="~/assets/images/quizData/share_url.png"
                                        alt=""
                                    />
                                    复制链接
                                </div>
                                <div class="share">
                                    <img
                                        src="~/assets/images/quizData/share_wx.png"
                                        alt=""
                                    />
                                    微信
                                </div>
                                <div class="flex-center margin-t6">
                                    <vue-qr
                                        v-if="id"
                                        :text="
                                            'https://api.xiaozhucaishui.com/h5/#/pages/details/wentikuInfo?id=' +
                                            id
                                        "
                                        :size="100"
                                        :margin="5"
                                    ></vue-qr>
                                </div>
                            </div>
                            <div slot="reference" class="chaozuo-item">
                                <img
                                    src="~/assets/images/quizData/share.png"
                                    alt=""
                                />
                                <span>分享</span>
                            </div>
                        </el-popover>
                    </div>
                </div>

                <div class="info">
                    <div v-if="info && info.keyword" class="keyword">
                        <!-- <nuxt-link
                            v-for="(val, idx) in info.keyword.split(',')"
                            :key="idx"
                            :to="'/quizdata/quizcate/' + val"
                            target="_blank"
                            class="wt-tags-item"
                        >
                            {{ val }}
                        </nuxt-link> -->
                        <div
                            v-for="(val, idx) in info.keyword.split(',')"
                            :key="idx"
                            class="wt-tags-item"
                        >
                            {{ val }}
                        </div>
                    </div>
                    <h1 class="qz-title fz22 c333">
                        {{ info && info.title }}
                    </h1>
                    <div v-if="info && info.abstract" class="abstract">
                        {{ info.abstract }}
                    </div>
                    <img
                        class="img_ct"
                        src="~/assets/images/quizData/jieda.png"
                        alt=""
                    />
                    <div
                        class="qz-content fz16"
                        v-html="info && info.answer_content"
                    ></div>
                    <img
                        class="img_bs"
                        src="~/assets/images/quizData/yiju.png"
                        alt=""
                    />
                    <div
                        class="qz-basis fz16"
                        v-html="info && info.pursuant_content"
                    ></div>

                    <div
                        v-if="all_based_source.length > 0"
                        class="qz-xglj fz16"
                    >
                        <div
                            v-for="(item, index) in all_based_source"
                            :key="index"
                            class="xglj-item"
                        >
                            <!-- <div
                                v-if="!userInfo"
                                class="xglj-a"
                                @click="noLoginGo"
                            >
                                <img
                                    src="~/assets/images/quizData/link.png"
                                    alt=""
                                />
                                <div>
                                    {{ item.title }}
                                </div>
                            </div> -->
                            <div v-if="item.type == '1'" class="xglj-a">
                                <img
                                    src="~/assets/images/quizData/link.png"
                                    alt=""
                                />
                                <nuxt-link
                                    :to="'/ssfgk/' + item.id + '.html'"
                                    target="_blank"
                                >
                                    {{ item.title }}
                                </nuxt-link>
                            </div>
                            <div v-if="item.type == '2'" class="xglj-a">
                                <img
                                    src="~/assets/images/quizData/link.png"
                                    alt=""
                                />
                                <nuxt-link
                                    :to="'/kjfgk/' + item.id + '.html'"
                                    target="_blank"
                                >
                                    {{ item.title }}
                                </nuxt-link>
                            </div>
                        </div>
                    </div>

                    <div class="up-down">
                        <div v-if="info" class="prev-next">
                            <div v-if="info.prevdata">
                                <div class="name">
                                    上一篇：
                                    <nuxt-link
                                        :to="`/quizdata/${info.prevdata.id}.html`"
                                        target="_blank"
                                        rel="prev"
                                    >
                                        {{ info.prevdata.title }}
                                    </nuxt-link>
                                </div>

                                <div>
                                    {{ info.prevdata.createtime }}
                                </div>
                            </div>
                            <div v-if="info.nextdata">
                                <div class="name">
                                    下一篇：
                                    <nuxt-link
                                        :to="`/quizdata/${info.nextdata.id}.html`"
                                        target="_blank"
                                        rel="next"
                                    >
                                        {{ info.nextdata.title }}
                                    </nuxt-link>
                                </div>
                                <div>
                                    {{ info.nextdata.createtime }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="recommendedReadingdiv">
                    <recommendedReading
                        :readingList="relateddata"
                        textKey="answer_content"
                        toType="Quiz"
                    />
                </div>
            </div>
            <div class="hotSearch-box">
                <div v-if="aboutList.length > 0" class="hotSearch_list">
                    <div class="title_box flex">
                        <div class="bold fz18">
                            <span class="colore75151">相关</span>问题
                        </div>
                    </div>
                    <el-skeleton animated :loading="aboutList.length == 0">
                        <template slot="template">
                            <div v-for="item in 7" :key="item" class="hotItem">
                                <el-skeleton-item variant="h1" />
                            </div>
                        </template>
                    </el-skeleton>
                    <nuxt-link
                        v-for="(item, index) in aboutList"
                        :to="`/quizdata/${item.id}.html`"
                        target="_blank"
                        class="hotItem fz14 c333 ellipsis1"
                        :key="index"
                    >
                        {{ item.title }}
                    </nuxt-link>
                </div>

                <div class="wx-gzh-con">
                    <img
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/xzwd-gzh-code.png"
                        alt=""
                    />
                    <div class="wx-gzh-con-text">
                        <!-- <div class="wx-gzh-con-title">
                            免费领取<span>问答券</span>
                        </div> -->
                        关注公众号
                        <!-- ，免费领取问答券 -->
                    </div>
                </div>

                <el-carousel
                    height="120px"
                    direction="vertical"
                    indicator-position="none"
                    class="qifuhaibao-carousel"
                >
                    <el-carousel-item>
                        <nuxt-link to="/service" class="qifuhaibao">
                            <img
                                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/service/wtk.png"
                                alt=""
                            />
                        </nuxt-link>
                    </el-carousel-item>
                    <el-carousel-item>
                        <nuxt-link to="/cswd/ask" class="qifuhaibao">
                            <img
                                src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/CSWD/QuizToCswdAsk.jpg"
                                alt=""
                            />
                        </nuxt-link>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <div class="copycode" id="copycode">{{ cloneText }}</div>
    </div>
</template>

<script>
import {
    getInfo,
    setLike,
    recommend_issue,
    getKeywordList,
} from "@/assets/api/quizData";
import { wtk_cancelLike } from "@/assets/api/userCenterApi.js";
import { getanalysedata2 } from "@/assets/api/indexApi";
import Img_sc from "@/assets/images/quizData/like_0.png";
import Img_ysc from "@/assets/images/quizData/like_1.png";

import { getText, internally } from "@/assets/utils/utils";

import { mapMutations, mapState } from "vuex";

import recommendedReading from "@/components/recommendedReading/index-router.vue";
import moment from "moment";

export default {
    name: "QuizDataDetail",
    async asyncData({ route }) {
        let data = {
            info: null,
            mateInfo: {
                title: "问题库",
                keywords: "",
                description: "",
            },
            relateddata: [],
            all_based_source: [],
            jsonld: {
                "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
                "@id": "https://www.xzcs2022.com/quizdata",
                images: [""],
                title: "",
                description: "",
                pubDate: "2024-03-14",
                upDate: "2024-03-14",
            },
            is_collect: 0
        };

        data.jsonld["@id"] += "/" + route.params.id;

        const res = await getInfo({ id: route.params.id.replace(".html", "") });
        if (res.code == 1) {
            data.info = res.data;
            data.jsonld.pubDate = moment(data.info.createtime * 1000).format(
                "YYYY-MM-DD"
            );
            data.jsonld.upDate = data.jsonld.pubDate;
            if (data.info.nextdata)
                data.info.nextdata.createtime = moment(
                    data.info.nextdata.createtime * 1000
                ).format("YYYY-MM-DD");
            if (data.info.prevdata)
                data.info.prevdata.createtime = moment(
                    data.info.prevdata.createtime * 1000
                ).format("YYYY-MM-DD");

            data.info.answer_content = internally(data.info.answer_content);

            data.mateInfo.title = data.info.title;
            data.mateInfo.description = getText(data.info.abstract);
            data.mateInfo.keywords = data.info.keyword;
            data.jsonld.title = data.info.title;
            data.jsonld.description = getText(data.info.abstract);
            data.is_collect = data.info.is_collect;
            if (data.info.is_show_basis == 1) {
                data.all_based_source = data.info.all_based_source;
            }
        }

        const res2 = await recommend_issue({});
        if (res2.code == 1) {
            data.relateddata = res2.data;
        }
        return data;
    },
    components: {
        recommendedReading,
    },
    layout: "home",
    head() {
        return {
            script: [
                {
                    type: "application/ld+json",
                    innerHTML: JSON.stringify(this.jsonld), // <- set jsonld object in data or wherever you want
                },
            ],
            __dangerouslyDisableSanitizers: ["script"],
            title: this.mateInfo.title + "-【小竹财税平台】",
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content: this.mateInfo.description,
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content: this.mateInfo.keywords,
                },
            ],
        };
    },
    data() {
        return {
            id: "",
            show: false,
            aboutList: [],
            page: 1,
            limit: 10,

            Img_sc: Img_sc,
            Img_ysc: Img_ysc,

            cloneText: "",

            showNoLogin: false,
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    created() {},
    beforeMount() {
        // 只会在浏览器执行
        this.$options.components["vueQr"] = () => import("vue-qr");
    },
    mounted() {
        this.id = this.$route.params.id.replace(".html", "");

        getanalysedata2({
            m_id: 1,
            type: 1,
            code: "PB3",
            describe: this.info.title,
        });
        if (window.localStorage.getItem("token")) this.getInfo();
        this.getAboutList(this.info.keyword);
        // this.recommend_issue();

        this.setmenuIndex("1");
        // this.creatQrCode();
    },
    watch: {
        // $route(to, from) {
        //     try {
        //         this.id = this.$route.params.id.replace(".html", "");
        //         this.getInfo();
        //     } catch (error) {}
        // },
    },

    methods: {
        ...mapMutations("common", ["setmenuIndex", "setloginShow"]),
        //获取详情
        async getInfo() {
            let res = await getInfo({ id: this.id });
            if (res.code == 1) {
                this.info.is_collect = res.data.is_collect;
                this.is_collect = this.info.is_collect;
                this.info.is_like = res.data.is_like
                this.info.likecounts = res.data.likecounts
                // this.info.createtime = moment(
                //     this.info.createtime * 1000
                // ).format("YYYY-MM-DD");
                // if (this.info.nextdata)
                //     this.info.nextdata.createtime = moment(
                //         this.info.nextdata.createtime * 1000
                //     ).format("YYYY-MM-DD");
                // if (this.info.prevdata)
                //     this.info.prevdata.createtime = moment(
                //         this.info.prevdata.createtime * 1000
                //     ).format("YYYY-MM-DD");

                // this.mateInfo.title = this.info.title;
                // this.mateInfo.description = this.info.subhead;
                // if (this.info.is_show_basis == 1) {
                //     this.all_based_source = this.info.all_based_source;
                // }
            } else if (res.code == -100) {
                this.$alert(
                    `<div style='text-align: left'>今日免费次数已用完，请您充值成为会员，以享受更多精彩的功能和服务。</div>`,
                    "温馨提示",
                    {
                        customClass: "vip-message-box",
                        dangerouslyUseHTMLString: true,
                        showClose: false,
                        closeOnClickModal: false,
                        confirmButtonText: "加入会员",
                        callback: (action) => {
                            this.$router.push({
                                path: "/user/myvip",
                            });
                        },
                    }
                );
                this.showNoLogin = true;
            }
        },

        //获取相关问题
        async getAboutList(keywords) {
            if (keywords == null) return;
            const res1 = await getKeywordList({ keyword: keywords });
            if (res1.code == 1) {
                let arr = res1.data.filter((val) => {
                    return this.id != val.id;
                });
                this.aboutList = arr.slice(0, 8);
            }
            // if (this.aboutList.length == 0) {
            //     let params = {
            //         query: this.info.title,
            //         retrieveFields: ["title"],
            //         page: 1,
            //         pageSize: 8,
            //     };
            //     const res = await quizSearch(params);
            //     if (res.status == 0) {
            //         let quizDataList = res.data.result;
            //         for (let item of quizDataList) {
            //             let data = await readJsonFileContent(item.matchDataUrl);
            //             data.data.answer_content = getText(
            //                 data.data.answer_content,
            //                 120
            //             );
            //             item.quizData = {
            //                 ...data.data,
            //             };
            //         }
            //         quizDataList.shift();
            //         this.aboutList = quizDataList;
            //     }
            // }
        },

        // 获取推荐阅读
        async recommend_issue() {
            const res = await recommend_issue({});
            if (res.code == 1) {
                this.relateddata = res.data;
            }
        },

        creatQrCode() {
            // this.$options.components["vue-qr"] = () => import("vue-qr");
            // var qrcode = new QRCode(this.$refs.qrcode, {
            //     text:
            //         "https://api.xiaozhucaishui.com/h5/#/pages/details/wentikuInfo?id=" +
            //         this.id, // 需要转换为二维码的内容
            //     width: 100,
            //     height: 100,
            //     colorDark: "#000000",
            //     colorLight: "#ffffff",
            //     correctLevel: QRCode.CorrectLevel.H,
            // });
        },

        //收藏与取消收藏
        async setLike() {
            let res = await wtk_cancelLike({ id: this.id });
            if (res.code == 1) {
                this.$message({
                    message:
                        this.info.is_collect == 0 ? "收藏成功" : "取消收藏",
                    type: "success",
                });
                this.getInfo();
            }
        },

        //点赞与取消点赞
        async setLike1() {
            let res = await setLike({ id: this.id });
            if (res.code == 1) {
                this.$message({
                    message: this.info.is_like == 0 ? "点赞成功" : "取消点赞",
                    type: "success",
                });
                this.getInfo();
            }
        },

        // 复制
        clone(text) {
            this.cloneText = "";
            if (window.location.href.startsWith("http://"))
                this.cloneText +=
                    "http://" +
                    window.location.host +
                    "/xzcs.html?url=" +
                    window.location.href;
            if (window.location.href.startsWith("https://"))
                this.cloneText +=
                    "https://" +
                    window.location.host +
                    "/xzcs.html?url=" +
                    window.location.href;
            if (this.userInfo)
                this.cloneText += "&code=" + this.userInfo.invite_code;

            this.$nextTick(() => {
                const range = document.createRange();
                range.selectNode(document.getElementById("copycode")); //获取复制内容的 id 选择器
                const selection = window.getSelection(); //创建 selection对象
                if (selection.rangeCount > 0) selection.removeAllRanges(); //如果页面已经有选取了的话，会自动删除这个选区，没有选区的话，会把这个选取加入选区
                selection.addRange(range); //将range对象添加到selection选区当中，会高亮文本块
                document.execCommand("copy"); //复制选中的文字到剪贴板
                selection.removeRange(range); // 移除选中的元素

                this.$message({
                    message: "复制成功",
                    type: "success",
                });
            });
        },

        noLoginGo() {
            if (!this.userInfo) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => {});
                return;
            }
        },
    },
};
</script>

<style lang="scss">
.xzcs-pc-quizdata-detail {
    .gaussian-blur {
        -webkit-filter: blur(7px);
        filter: blur(7px);
        overflow: hidden;
        * {
            -webkit-filter: blur(7px);
            filter: blur(7px);
            overflow: hidden;
        }
    }

    .no-login {
        position: fixed;
        background-color: rgba(0, 0, 0, 0.5);
        height: 100%;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        .no-login-box {
            background: #fff;
            padding: 15px 20px;
            border-radius: 2px;
            width: 217px;
            line-height: 2;
            a {
                padding-right: 10px;
                color: #1c87f3;
                text-decoration: underline;
            }
        }
    }
    .nav {
        padding: 0 21px;
        justify-content: space-between;
        align-items: center;
        height: 58px;
        background-color: #ffffff;
        // margin: 0 auto;
        // margin-top: 30px;
        // width: 857px;
        border-bottom: 1px solid #f1f1f1;
        .daohang {
            align-items: center;
            font-size: 13px;
            color: #9e9e9e;
        }
        .chaozuo {
            align-items: center;
            .chaozuo-item {
                cursor: pointer;
                margin-left: 24px;
                display: flex;
                align-items: center;
                img {
                    width: 20px;
                    height: 20px;
                }
                span {
                    font-size: 12px;
                    color: #666666;
                    padding-left: 3px;
                }
            }
        }
    }

    .el-breadcrumb__inner {
        color: #9e9e9e !important;
        font-size: 13px;
    }

    .main-body {
        margin: 30px auto;
        // margin-bottom: 30px;
        width: 1200px;
        .info {
            padding: 30px 50px;
            width: 857px;
            background-color: #fff;
            .keyword {
                display: flex;
                flex-wrap: wrap;
                .wt-tags-item {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    // cursor: pointer;
                    min-width: 30px;
                    padding: 2px 10px;
                    height: 26px;
                    color: #1772f6;
                    background-color: #e7f1fe;
                    font-size: 12px;
                    border-radius: 75px;
                    margin-right: 8px;
                }
            }
        }
        .left {
            .qz-title {
                margin-top: 15px;
            }

            .abstract {
                margin-top: 10px;
                background-color: #f9f9f9;
                color: #666;
                font-size: 14px;
                padding: 8px 16px;
            }
            .img_ct {
                position: absolute;
                margin-left: 18px;
                margin-top: 30px;
                width: 129px;
                height: 39px;
            }

            .qz-content {
                // width: 600px;
                margin-top: 50px;
                padding-left: 18px;
                padding-top: 30px;
                padding-bottom: 30px;
                background-color: #f9fcff;
                color: #4a6990;
                white-space: pre-line;
                ::v-deep img {
                    max-width: 100%;
                    height: auto !important;
                    display: block;
                }
                img {
                    max-width: 100%;
                    height: auto !important;
                    display: block;
                }
                ::v-deep a {
                    color: #2440b3;
                    text-decoration: underline;
                }
                a {
                    color: #2440b3;
                    text-decoration: underline;
                }
            }

            .qz-basis {
                padding-left: 18px;
                margin-top: 50px;
                padding-top: 30px;
                padding-bottom: 20px;
                font-size: 14px;
                color: #bd8248;
                background-color: #fffbf7;
                white-space: pre-line;
            }

            .img_bs {
                position: absolute;
                margin-left: 18px;
                margin-top: 30px;
                width: 129px;
                height: 39px;
            }

            .collect {
                margin-top: 50px;

                img {
                    width: 84px;
                    height: 84px;
                }
            }

            ::v-deep p,
            span,
            a {
                // font-family: ZTGB2312;
                line-height: 2;
            }
            p,
            span,
            a {
                // font-family: ZTGB2312;
                line-height: 2;
            }
        }

        .hotSearch-box {
            margin-left: 15px;
            width: 328px;
            min-width: 328px;

            .hotSearch_list {
                // min-height: 482px;
                // height: 482px;
                background-color: #fff;
                border-radius: 6px;
                margin-bottom: 14px;

                .title_box {
                    padding: 20px 30px;
                    width: 328px;
                    height: 60px;
                    //background-image: url("../../assets/quizData/hot_bj.png");
                    background-position: 100%;
                    background-size: cover;
                    background-repeat: no-repeat;

                    img {
                        margin-right: 10px;
                        width: 16px;
                        height: 18px;
                    }
                }

                .hotItem {
                    cursor: pointer;
                    padding: 0 30px;
                    width: 100%;
                    height: 50px;
                    line-height: 50px;
                    border-bottom: 1px solid #f5f5f5;
                    background: #fff;
                    display: block;
                    box-sizing: border-box;
                    &:hover {
                        color: #1c87f3 !important;
                        text-decoration: underline;
                    }
                }
            }
            .hot-tags {
                margin-top: 14px;
                background-color: #fff;
                border-radius: 6px;
                padding: 24px 25px;
                .title {
                    font-size: 18px;
                    color: #333;
                    font-weight: bold;
                }
                .tags {
                    margin-top: 20px;
                    display: flex;
                    flex-wrap: wrap;
                    .tags-item {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        cursor: pointer;
                        margin-bottom: 20px;
                        min-width: 30px;
                        padding: 2px 10px;
                        height: 26px;
                        background-color: #f6f6f6;
                        color: #333;
                        font-size: 12px;
                        border-radius: 75px;
                        margin-right: 8px;
                        &:hover {
                            color: #1772f6;
                            background-color: #e7f1fe;
                        }
                    }
                }
            }
        }
    }
    .cFFA {
        color: #ffac5a;
    }

    .qz-xglj {
        padding-left: 18px;
        padding-bottom: 20px;
        font-size: 14px;
        // white-space: pre-line;
        color: #bd8248;
        background-color: #fffbf7;
        .xglj-item {
            padding: 8px 0;
            a {
                line-height: 1;
            }
        }
        .xglj-a {
            color: #333333;
            display: flex;
            align-items: flex-start;
            cursor: pointer;
            a {
                margin-left: 12px;
                line-height: 1.5;
            }
            img {
                width: 16px;
                height: 16px;
                min-width: 16px;
                min-height: 16px;
                padding-top: 4px;
            }
            &:hover a {
                color: #206ebc;
                text-decoration: underline;
            }
        }
    }

    .el-breadcrumb__inner.is-link {
        font-weight: normal !important;
    }

    .xgwt {
        padding: 24px 31px;
        background-color: #ffffff;
        border-radius: 6px;
        margin-top: 19px;

        .xgwt-title {
            font-size: 18px;
            font-weight: 500;
            color: #333333;
            padding-bottom: 4px;
        }

        .xgwt-list {
            .xgwt-item {
                display: block;
                padding: 23px 0;
                font-size: 15px;
                color: #666666;
                border-bottom: 1px dashed #e1e1e1;

                > div {
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    line-height: 21px;
                }
                &:hover {
                    color: #1c87f3;
                }
            }
        }
    }

    .up-down {
        // margin-top: 11px;

        .prev-next {
            background-color: #ffffff;
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
            padding: 20px 0 0;
            font-size: 14px;
            color: #999999;

            > div {
                padding-bottom: 10px;

                display: flex;
                justify-content: space-between;
                .name {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 667px;
                }
            }

            > div:hover {
                a {
                    text-decoration: underline;
                }
            }
        }
    }

    .wx-gzh-con {
        display: flex;
        align-items: center;
        padding: 20px 22px;
        background-color: #ffffff;
        position: sticky;
        top: 95px;
        border-radius: 6px;
        img {
            width: 100px;
            height: 100px;
            margin-right: 16px;
        }
        .wx-gzh-con-text {
            font-size: 18px;
            font-family: OPPOSans, OPPOSans;
            font-weight: 600;
            color: #666666;
            line-height: 20px;
        }
        .wx-gzh-con-title {
            font-size: 18px;
            font-family: OPPOSans, OPPOSans;
            font-weight: 500;
            color: #333333;
            line-height: 20px;
            padding-bottom: 9px;
            span {
                color: #ff4646;
            }
        }
    }
    .qifuhaibao-carousel {
        margin-top: 14px;
        position: sticky;
        top: 249px;
    }
    .qifuhaibao {
        display: block;

        img {
            width: 100%;
            height: auto;
        }
    }

    .width200 {
        width: 200px;
    }

    .ysctext {
        color: rgb(255 200 71);
    }

    .color1c87f3 {
        color: #1c87f3;
    }

    .margin-t6 {
        margin-top: 6px;
    }

    .recommendedReadingdiv {
        margin-top: 20px;
    }

    .colore75151 {
        color: #e75151;
    }

    .copycode {
        opacity: 0;
        height: 0;
    }
}

.xzcs-pc-quizdata-detail-share {
    .share {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #333333;
        padding: 7px 9px;
        cursor: pointer;
        &:hover {
            color: #1c87f3;
        }
        img {
            width: 24px;
            min-width: 24px;
            height: 24px;
            margin-right: 8px;
        }
    }
    .margin-t6 {
        margin-top: 6px;
    }
}
</style>
